<template>
  <div class="hm-item">
    <div
      class="item"
      @click="$router.push({ path: '/detail', query: { id: item.id } })"
    >
      <div class="top">
        <img :src="item.avatar" alt="" />
        <!-- <img :src="item.creatorAvatar" alt="" /> -->
        <div class="right">
          <div class="title">{{ item.stem }}</div>
          <div class="info">
            <!-- <span class="name">{{ item.creatorName }}</span> -->
            <span class="name">{{ item.creator }}</span>
            <span class="divider">|</span>
            <span class="date">{{ item.createdAt }}</span>
          </div>
        </div>
      </div>
      <div class="content" v-text="cleanContent"></div>
      <div class="bottom">
        <span class="like">点赞 {{ item.likeCount }}</span>
        <span class="divider">|</span>
        <span class="view">浏览 {{ item.views }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HmItem",
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  computed: {
    cleanContent() {
      return this.item.content ? this.item.content.replace(/<[^>]*>/g, "") : "";
    },
  },
};
</script>

<style lang="less" scoped>
.hm-item {
  .item {
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    .top {
      display: flex;
      align-items: flex-start;
      margin-bottom: 12px;

      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 12px;
        object-fit: cover;
      }

      .right {
        flex: 1;

        .title {
          font-size: 16px;
          color: #333;
          font-weight: 500;
          line-height: 1.4;
          margin-bottom: 6px;
        }

        .info {
          font-size: 12px;
          color: #999;

          .divider {
            margin: 0 8px;
          }
        }
      }
    }
  }
  .content {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
    // 超过两行显示省略号
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .bottom {
    font-size: 12px;
    color: #999;

    .divider {
      margin: 0 8px;
    }

    .like,
    .view {
      &:hover {
        color: #1890ff;
        cursor: pointer;
      }
    }
  }
}
</style>
